import React, { useCallback, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useLocation } from 'react-router-dom'
import { getMvPlay, getMvUrl, getSimiMv } from '@/utils/api'
import { MvData } from '@/modules/Mv'
import { RootState } from '@/modules/RootState'
import './Mv.scss'

function Mv() {
    const dispatch = useDispatch()
    const location = useLocation()
    const mv = useSelector((state:RootState) => state.mv)

    useEffect(()=>{
        dispatch(getMvUrl(location.state))         
        dispatch(getMvPlay(location.state))
        dispatch(getSimiMv(location.state))
    },[dispatch,location])

    const artists = useCallback(()=>{
        if(Object.keys(mv.mvURL).length != 0){
            return(
                mv.mvURL.artists.map((item,index)=>{
                    return(
                        <span key={index}>
                            {index >= 1 ? ` / ${item.name}` : item.name}
                        </span>
                    )
                })
            )
        }else{
            return ''
        }
    },[dispatch,mv.mvURL])

  return (
    <div className="video-box">
        <div className="video-box2">
            <video controls src={mv.mvPlayURL.url}>
            </video>
        </div>
        <div className="video-box3">
            <div className="vedio-name" >
                <span>
                    {mv.mvURL.name}
                </span>
            </div>
            <div className="vedio-name2" >
                <div>
                <span>演唱：</span>
                {
                    artists()
                }
                </div>
                <div>
                   <span>
                   {mv.mvURL.playCount}
                    次播放
                   </span>
                </div>
                <div>
                    <span>
                        发布时间：
                    {mv.mvURL.publishTime}
                    </span>
                </div>
            </div>
        </div>
        <div>
            <button>收藏</button>
            <button>下载</button>
            <button>分享</button>
        </div>
        <hr/>
        <div className="todayRecommend">
            <div className="today">
                {
                    mv.mvs.map((item,index)=>{
                        return(
                    <div key={index} className='mvs'>
                        <img src={item.cover} alt=""/>
                        <p>{item.name}</p>
                    </div>
                        )
                    })
                }
            </div>
        </div>
    </div>
  )
}

export default React.memo(Mv)